<template>
  <view class="edit_box">
    <view class="edit_box_title">输入信息</view>
    <up-input v-model="formData.cell" placeholder="输入手机号" border="bottom"> </up-input>
    <up-input v-model="formData.checkCode" placeholder="输入验证码" border="bottom">
      <template #suffix>
        <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
        <u-button @tap="getCode" :text="tips" color="#02409a" size="mini"></u-button>
      </template>
    </up-input>
    <u-input v-model="formData.passWord" placeholder="输入密码" border="none" :password="isPass">
      <template #suffix>
        <u-icon name="eye-off" color="#bfbfbf" size="28" v-if="isPass" @click="isPass = false"></u-icon>
        <u-icon name="eye" color="#bfbfbf" size="28" v-else @click="isPass = true"></u-icon>
      </template>
    </u-input>
    <view class="bottomBox">
      <u-button type="primary" @click="submit" color="#02409a">提交</u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const formData = ref({
  cell: "",
  checkCode: "",
  passWord: "",
  userId: uni.getStorageSync("userId"),
});
const isPass = ref(true);
const tips = ref("获取验证码");
const uCodeRef = ref<any>(null);
const codeChange = (text: string) => {
  tips.value = text;
};
const getCode = () => {
  console.log(uCodeRef.value.canGetCode);
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    // smsSend({ cell: formData.value.cell }).then((res: any) => {
    //   uni.hideLoading();
    //   // 这里此提示会被this.start()方法中的提示覆盖
    //   uni.showToast({
    //     title: "验证码已发送",
    //     icon: "none",
    //   });
    //   // 通知验证码组件内部开始倒计时
    //   uCodeRef.value.start();
    //   console.log(res);
    // });
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "none",
    });
  }
};
const submit = async () => {
  // await updateUserPsw(formData.value);
  uni.showToast({
    title: "修改成功",
    icon: "success",
    duration: 2000,
    complete() {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    },
  });
};
</script>

<style lang="less" scoped>
.edit_box {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border-radius: 32rpx;
  margin: 20rpx 28rpx;
  padding: 32rpx 40rpx;

  .edit_box_title {
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 44rpx;
  }

  /deep/.u-textarea {
    padding: 38rpx 0px;
  }

  /deep/ .u-border-bottom {
    color: #f9f9f9 !important;
  }

  // 修改登录密码
  /deep/.u-input {
    padding: 38rpx;
  }
}

/deep/.u-input {
  padding: 34rpx 0px !important;
}
</style>
